<template>
  <div class="dialog" v-if="form">
    <div class="title">业务系统基本信息</div>
    <div class="wrap1" v-if="form.cloudUp">
      <div>
        <div>系统名称:</div>
        {{ form.cloudUp.projectname }}
      </div>
      <div>
        <div>云服务商:</div>
        {{ form.cloudUp.supplierName }}
      </div>
      <div>
        <div>上线时间:</div>
        {{ form.cloudUp.onlinetime }}
      </div>
      <div>
        <div>上云区域:</div>
        {{ translatecloudUpArea(form.cloudUp.cloudUpArea) }}
      </div>
      <div>
        <div>业务部门:</div>
        {{ form.cloudUp.officeName }}
      </div>
      <div>
        <div>业主方联系人:</div>
        {{ form.cloudUp.contactsNickName }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.contactsinfo }}
      </div>
      <div>
        <div>邮箱:</div>
        {{ form.cloudUp.email }}
      </div>
      <div>
        <div>承建单位:</div>
        {{ form.cloudUp.constunit }}
      </div>
      <div>
        <div>承建方联系人:</div>
        {{ form.cloudUp.constcts }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.constctsinfo }}
      </div>
      <div>
        <div>邮籍:</div>
        {{ form.cloudUp.constemail }}
      </div>
      <!-- <div style="width: 100%">
                <div style="width: auto">系统建设（运维）资金来源:</div>
                {{ form.cloudUp.fundFrom }}
            </div> -->
      <div style="width: 100%">
        <div style="width: auto">自行落实部门上云经费:</div>
        {{ form.cloudUp.fundBySelf ? "是" : "否" }}
      </div>
      <div style="width: 100%">
        <div>项目简介:</div>
        {{ form.cloudUp.introduction }}
      </div>
      <div style="width: 100%">
        <div>申请理由:</div>
        {{ form.cloudUp.remarks }}
      </div>
    </div>
    <div class="title">申请资源</div>
    <div style="width: 100%">
      <label style="margin-right: 10px">服务商:</label>
      <span>{{ form.cloudSupplier_label }}</span>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <div style="padding: 20px 20px; width: 100%; max-height: 500px; overflow-y: scroll">
        <el-table :data="form.hosts" style="width: 100%; margin-top: 13px">
          <el-table-column label="资源类型">
            <template slot-scope="scope">
              {{
                scope.row.flavorType == 1
                  ? "云服务器"
                  : scope.row.flavorType == 2
                  ? "高性能服务器"
                  : scope.row.serverCode
                  ? "数据库"
                  : "存储产品"
              }}
            </template>
          </el-table-column>
          <el-table-column label="实例名称">
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType">{{ scope.row.hostName }}</span>
              <span v-else-if="scope.row.serverCode">{{ scope.row.hostInstanceName }}</span>
              <span v-else-if="!scope.row.hostInstanceNames.length"></span>
              <div v-else style="margin-bottom: 6px" v-for="(item, index) in scope.row.hostInstanceNames" :key="index">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="可用域">
            <template slot-scope="scope">
              {{ scope.row.availableDomain_label }}
            </template>
          </el-table-column>
          <el-table-column label="规格分类 / 资源类型">
            <template slot-scope="scope">
              {{ scope.row.cloudFlavorCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope">
              <div v-if="scope.row.flavorType == 1">
                {{ scope.row.cpuNumber }}vCPU； {{ scope.row.memorySize }}G内存
              </div>
              <div v-if="scope.row.flavorType == 2">{{ scope.row.cloudFlavorCode_desc }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作系统">
            <template slot-scope="scope">
              <div>{{ scope.row.osName || osName(scope.row.osServerCode[0]) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="数据盘" width="300">
            <template slot-scope="scope" v-if="scope.row.flavorType == 1">
              <div v-if="scope.row.flavorType" placement="top-start" width="500" trigger="hover">
                <div v-if="scope.row.flavorType == 1">
                  <div style="margin-bottom: 6px">
                    <label>
                      (共<span style="color: #e83112">{{ scope.row.disks.length }}</span
                      >块){{ scope.row.disks.length ? ":" : "" }}</label
                    >
                  </div>
                  <div style="margin: 0 0 6px 16px" v-for="(item, index) in scope.row.disks" :key="index">
                    <span>{{ item.diskServerCode_label || item.diskServerName }}</span
                    >，{{ item.dataDiskSize }}GB
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="priceFlag" width="650">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>单价</div>
                <div>用量</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>{{ item.resourceName }}</div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.databases" style="width: 100%; margin-top: 13px">
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row.serverCode_label }}</span>
            </template>
          </el-table-column>
          <el-table-column label="版本">
            <template slot-scope="scope">
              <span>{{ scope.row.databaseVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位数">
            <template slot-scope="scope">
              <span>{{ scope.row.systemDigits }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="priceFlag" width="650">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>单价</div>
                <div>用量</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>{{ item.resourceName }}</div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table :data="form.storeProducts" style="width: 100%; margin-top: 13px">
          <el-table-column label="磁盘类型">
            <template slot-scope="scope">
              {{ scope.row.diskServerCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="磁盘用量">
            <template slot-scope="scope">
              <span> {{ scope.row.dataDiskSize }}GB </span>
            </template>
          </el-table-column>
          <el-table-column label="存储类型">
            <template slot-scope="scope">
              <span> {{ scope.row.productCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务类型">
            <template slot-scope="scope">
              <span> {{ scope.row.diskCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务器">
            <template slot-scope="scope">
              <div v-for="item in scope.row.hostIds">{{ gethostName(item) }}</div>
            </template>
          </el-table-column>
          <el-table-column v-if="priceFlag" width="650">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">费用</div>
              <div class="tab_wrap">
                <div>名称</div>
                <div>单价</div>
                <div>用量</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>{{ item.resourceName }}</div>
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="priceFlag" style="margin-top: 10px; text-align: right; color: rgb(167, 167, 167)">
      预估费用：<span style="color: rgb(255, 173, 77); font-size: 24px">¥{{ parseInt(form.dailyPriceTotal) }}</span
      >/天
      <span style="margin-left: 20px; color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.yearPriceTotal) }}</span
      >/年
    </div>
    <div class="title" style="margin-top: 30px">安全产品</div>
    <div class="wrap1">
      <div style="width: 100%">
        <span v-for="(item, index) in getSafeProducts" :key="index" style="margin-left: 20px"
          >{{ item.productName }} <span style="margin-left: 4px">*{{ item.count }}</span>
        </span>
      </div>
    </div>
    <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
    <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
      <div style="display: flex"><span style="font-weight: bold; margin-right: 10px">说明:</span>{{ form.remark }}</div>
      <div style="font-weight: bold">文件:</div>
      <div style="display: flex; flex-wrap: wrap">
        <el-table :data="form.files" style="margin-left: 20px; width: 50vw">
          <el-table-column label="文件名称">
            <template slot-scope="scope">
              {{ scope.row.name.substring(0, scope.row.name.lastIndexOf(".")) }}
            </template>
          </el-table-column>
          <el-table-column label="文件类型">
            <template slot-scope="scope">
              {{ scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1, scope.row.name.length) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" class-name="small-padding fixed-width" v-if="false">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="previewFile(scope.row)">预览 </el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="DeleteFile(scope.row, scope.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";
export default {
  name: "detail",
  components: {},
  props: {
    //   configure: {
    //       type: Object,
    //       default: {
    //           available_domain: [], //可用域
    //           cloud_service_provider: [], //服务商
    //           storage_type: [], //系统盘类型
    //           codeList: [], //云服务器规格列表
    //           czxtList: [], //操作系统列表
    //           ccList: [], //数据盘类型
    //           fwcpList: [], //服务型磁盘类型
    //           wlfwqList: [], //高性能服务器资源类型
    //           sjkList: [], //数据库类型
    //           yyaqList: [], //安全产品
    //       },
    //   },
    form: {
      type: Object,
      default: null,
    },
    otherFlag: {
      type: Boolean,
      default: true,
    },
    priceFlag: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getSafeProducts() {
      let list = [],
        productNames = [];
      this.form.safeProducts.forEach((item) => {
        let index = productNames.indexOf(item.productName);
        if (index < 0) {
          productNames.push(item.productName);
          item.count = 1;
          list.push(item);
        } else {
          list[index].count += 1;
        }
      });
      return list;
    },
  },
  data() {
    return {
      base_url: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false,
      cloud_up_areaList: [],
      configure: JSON.parse(sessionStorage.getItem("configure")),
    };
  },
  created() {
    getDicts("cloud_up_area").then((response) => {
      this.cloud_up_areaList = response.data;
    });
  },
  methods: {
    gethostName(id) {
      let name = "";
      this.form.hosts.some((item) => {
        if (item.id == id) {
          name = item.hostName;
          return true;
        }
      });
      return name;
    },
    translatecloudUpArea(data) {
      var Name = "";
      this.cloud_up_areaList.forEach((item) => {
        if (item.dictValue == data) {
          Name = item.dictLabel;
        }
      });
      return Name;
    },
    osName(code) {
      let serviceName;
      this.configure.czxtList.forEach((item) => {
        if (item.code == code) {
          serviceName = item.serviceName;
        }
      });
      return serviceName;
    },
    previewFile(item) {
      if (
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpeg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpg" ||
        item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "png"
      ) {
        this.dialogImageUrl = item.url;
        this.dialogVisible = true;
        return;
      } else {
        this.$message.error(`仅限后缀名为 gif、jpeg、jpg、 png可预览`);
      }
    },
    DeleteFile(data, index) {},
    //显示弹窗
    showAdd(num, data, index) {
      this.index = index;
      this.addShow = num;
      setTimeout(() => {
        this.$refs.addBdialog.init(JSON.parse(JSON.stringify(data)));
      }, 200);
    },
    //文件预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  padding-right: 20px;
  font-size: 12px;
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }

      i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
      }
    }
  }
  .wrap1 {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-left: 20px;
    overflow-x: hidden;
    min-width: 1380px;
    // justify-content: space-between;
    border-radius: 10px;
    div {
      margin-top: 20px;
      width: 25%;
      // margin-left: 20px;
      min-width: 340px;
      display: flex;
      border-bottom: 1px solid rgba(192, 196, 204, 0.5);
      padding-bottom: 10px;
      div {
        width: 100px;
        min-width: 100px;
        font-weight: bold;
        margin: 0;
        display: flex;
        padding-right: 10px;
        // justify-content: flex-end;
        color: #606266;
        border-bottom: 0px solid rgba(192, 196, 204, 0.5);
      }
    }
  }
  .wrap2 {
    padding: 0 20px 20px 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
    div {
      margin-top: 20px;
    }
  }
  .wrap3 {
    padding: 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
  }
  .tab_wrap {
    display: flex;
    justify-content: space-between;
    div {
      width: 25%;
      padding: 10px 0;
    }
    div:first-child {
      font-weight: bold;
    }
  }
}
</style>
